<p-sidebar header="设置Field"
  [(visible)]="visible"
  position="left"
  [modal]="false"
  [draggable]="true"
  [autoZIndex]="true"
  [style]="{ width: 'calc(100vw - 40rem)' }">
  <ng-template pTemplate="header">
    <h5>设置Field</h5>
  </ng-template>
  <div class="flex flex-column px-1 py-5 gap-4"
    *ngIf="field">
    <div class="grid">
      <div class="col-12 md:col-4">
        <div class="card p-fluid">
          <h5>Horizontal</h5>
          <div class="field grid">
            <label 
              class="col-12 mb-2 md:col-2 md:mb-0">名称</label>
            <div class="col-12 md:col-10">
              <input type="text"
                pInputText
                class="w-full p-inputtext-sm"
                [required]="true"
                placeholder="名称"
                [(ngModel)]="field.Name" />
            </div>
          </div>
          <div class="field grid">
            <label
              class="col-12 mb-2 md:col-2 md:mb-0">描述</label>
            <div class="col-12 md:col-10">
              <input type="text"
                pInputText
                class="w-full p-inputtext-sm"
                [required]="true"
                placeholder="描述"
                [(ngModel)]="field.Description" />
            </div>
          </div>
          <div class="field grid">
            <label htmlFor="Address"
              class="col-12 mb-2 md:col-2 md:mb-0">状态地址</label>
            <div class="col-12 md:col-10">
              <input type="text"
                pInputText
                class="w-full p-inputtext-sm"
                [required]="true"
                placeholder="状态地址"
                [(ngModel)]="field.Address" />
            </div>
          </div>
          <div class="field grid">
            <label htmlFor="Address"
              class="col-12 mb-2 md:col-2 md:mb-0">字体大小</label>
            <!-- <div class="col-12 md:col-10">
              <input type="text"
                pInputText
                class="w-full p-inputtext-sm"
                [required]="true"
                placeholder="状态地址"
                [(ngModel)]="field.Address" /> -->
            <div class="col-12 md:col-10">
              <p-inputNumber [min]="10"
                [max]="100"
                styleClass="w-full p-inputtext-sm"
                [required]="true"
                placeholder="字体大小"
                [(ngModel)]="field.FontSize"></p-inputNumber>
            </div>
          </div>
          <div class="field grid">
            <label htmlFor="Address"
              class="col-12 mb-2 md:col-2 md:mb-0">类型</label>
            <div class="col-12 md:col-10">
              <p-dropdown [options]="types"
                [(ngModel)]="field.Type"
                placeholder="字段类型"></p-dropdown>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 md:col-8">
        <div class="card p-fluid">
          <!-- todo -->
          <p-table *ngIf="field"
            [value]="field.Maps"
            styleClass="p-datatable-sm field-list"
            [reorderableColumns]="true">
            <ng-template pTemplate="caption">
              <div class="flex align-items-center justify-content-between">
                <i class="pi pi-plus cursor-pointer	"
                  title="添加"
                  (click)="onAddFieldMapClick()"></i>
              </div>
            </ng-template>
            <ng-template pTemplate="header">
              <tr>
                <th></th>
                <th>值</th>
                <th>描述</th>
                <th>颜色</th>
                <th>操作</th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body"
              let-map
              let-columns="columns"
              let-index="rowIndex">
              <tr [pReorderableRow]="index">
                <td>
                  <span class="pi pi-bars"
                    pReorderableRowHandle></span>
                </td>
                <td>
                  {{map.Key}}
                </td>
                <td>
                  {{map.Description}}
                </td>
                <td>
                  <i class="pi pi-circle-fill"
                    [title]="map.Color"
                    [style]="{color:map.Color}"></i>
                </td>
                <td>
                  <i class="pi pi-file-edit mr-2 cursor-pointer	"
                    title="修改"
                    (click)="onEditFieldMap(map)"></i>
                  <i class="pi pi-trash cursor-pointer"
                    title="删除"
                    (click)="onDeleteFieldMap(map)"></i>
                </td>
              </tr>
            </ng-template>
          </p-table>
        </div>
      </div>
    </div>
  </div>

  <ng-template pTemplate="footer">
    <div class="flex flex-row gap-4 justify-content-end">
      <p-button icon="pi pi-check"
        (click)="onEditConfirm()"
        styleClass="p-button-sm mr-2"
        [disabled]="!canCommit"
        label="确定"></p-button>
      <p-button icon="pi pi-times"
        (click)="onEditCancel()"
        severity="secondary"
        styleClass="p-button-sm mr-2"
        label="取消"></p-button>
    </div>

  </ng-template>
</p-sidebar>

<app-field-value-map-config-dialog #configDialog
  (editConfirm)="onEditFieldMapConfirm($event)"></app-field-value-map-config-dialog>